<template>
	<view class="Global">


		<bgImage></bgImage>

		<MyNav :title="title" bgColor="" :backIcon="isback" id="main"></MyNav>



		<view class="content">


			<view class="contentItem2" @click="daySetting()">

				<view class="contentItemTextLeftContent">
					<text class="contentItemTextLeft">工作日设置</text>

				</view>

				<view class="contentItemRightContent">
					<text class="contentItemTextLeft">{{workDay}}</text>

					<view class="">
						<uni-icons type="right" size="14"></uni-icons>
					</view>


				</view>

			</view>


			<view class="contentItem2" @click="communityTime()">

				<view class="contentItemTextLeftContent">
					<text class="contentItemTextLeft">上下班时间</text>

				</view>

				<view class="contentItemRightContent">
					<text class="contentItemTextLeft">{{workTime.goWorkTime}} - {{workTime.offWorkTime}}</text>

					<view class="">
						<uni-icons type="right" size="14"></uni-icons>
					</view>


				</view>

			</view>


<!--			<view class="contentItem2">

				<view class="contentItemTextLeftContent">
					<text class="contentItemTextLeft">法定节假日自动休假</text>

				</view>

				<view class="contentItemRightContent" @click="outsideOpenOrClose()">

					<image v-show="outsideDeviceSwitch==true" src="/static/clock/dakai.png"
						class="contentItemRightContentSwitchImg" mode="scaleToFill"></image>

					<image v-show="outsideDeviceSwitch==false" src="/static/clock/guanbi.png"
						class="contentItemRightContentSwitchImg" mode="scaleToFill"></image>


				</view>

			</view>-->



<!--			<view class="contentItem2">

				<view class="contentItemTextLeftContent">
					<text class="contentItemTextLeft">特殊日</text>

				</view>

				<view class="contentItemRightContent">
					<text class="contentItemTextLeft">未设置</text>

					<view class="">
						<uni-icons type="right" size="14"></uni-icons>
					</view>


				</view>

			</view>-->



<!--			<view class="contentItem2">

				<view class="contentItemTextLeftContent">
					<text class="contentItemTextLeft">弹性打卡</text>

				</view>

				<view class="contentItemRightContent" @click="OpenOrClose()">

					<image v-show="DeviceSwitch==true" src="/static/clock/dakai.png"
						class="contentItemRightContentSwitchImg" mode="scaleToFill"></image>

					<image v-show="DeviceSwitch==false" src="/static/clock/guanbi.png"
						class="contentItemRightContentSwitchImg" mode="scaleToFill"></image>


				</view>

			</view>-->


		</view>




	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'

	import bgImage from '@/components/backgroundImage.vue'
  import {daySettingList, myWorkTime} from "@/pages/api/api.js";


	export default {
		components: {
			MyNav,
			bgImage,

		},
		data() {
			return {
				title: '上下班设置',
				isback: true,
	// 法定节假日自动休假开关
	outsideDeviceSwitch:false,
	// 弹性打卡
	DeviceSwitch:false,
        workTime: {},
        dayList: [],
        workDay: '',
        query: {},
			}
		},

    onLoad: function(option) {
      this.workTime = JSON.parse(decodeURIComponent(option.workTime));
      this.query.devId = this.workTime.devId
      this.query.storeId = this.workTime.storeId
      this.query.tenantId = this.workTime.tenantId
      this.daySettingList();
      this.myWorkTime();
    },
		methods: {
      daySettingList(){
        daySettingList(this.query).then(res=>{
          if(res.code==200){
            this.dayList = res.rows
            let dayData = [];
            this.dayList.forEach(item=>{
              dayData.push(item.workName)
            })
            this.workDay = dayData.join(",")
          }
        })
      },
      myWorkTime(){
        let workTimeId = this.workTime.workTimeId
        myWorkTime(this.workTime.workTimeId).then((res) =>{
          if(res.code==200){
            this.workTime = res.data;
            this.workTime.workTimeId = workTimeId
          }
        })
      },
			// 工作日设置
			daySetting(){
        let data = {
          devId: this.workTime.id,
          storeId: this.workTime.storeId,
          tenantId: this.workTime.tenantId,
          workTimeId: this.workTime.workTimeId
        }
        let param = {
          data: data,
          days: this.dayList
        }
				uni.navigateTo({
					url: '/subPack/clockIn/daySetting/daySetting?param='+encodeURIComponent(JSON.stringify(param)),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			outsideOpenOrClose(){
				this.outsideDeviceSwitch=!this.outsideDeviceSwitch
			},
			// 弹性打卡
			OpenOrClose(){
				this.DeviceSwitch=!this.DeviceSwitch

			},
			// 上下班时间
			communityTime(){
				uni.navigateTo({
					url: '/subPack/clockIn/commutingTime/commutingTime?workTime='+encodeURIComponent(JSON.stringify(this.workTime)),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>

	.contentItemTextLeftContent {

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.contentItemRightContentSwitchImg {
		display: flex;

		width: 80rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.contentItemRightContent {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		margin-right: 30rpx;
	}

	.contentItemTextRight {
		font-size: 28rpx;
		font-weight: 600;
		color: #666666;
		margin-right: 30rpx;
		width: 200rpx;
		text-align: right;
	}

	.contentItemTextLeftStart {
		color: red;
	}

	.contentItemRightContentImg {
		width: 20rpx;
		height: 10rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;

	}

	.contentItemTextLeft {
		font-size: 28rpx;
		font-weight: 600;
		color: black;
		margin-left: 30rpx;
    white-space: nowrap; /* 确保文本在一行内显示 */
    overflow: hidden; /* 隐藏溢出的内容 */
    text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
	}

	.contentItem2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		width: 690rpx;
		height: 120rpx;

		border-bottom: #F9FCFF solid 1rpx;

		/* background-color: aqua; */
	}

.content{
	width: 690rpx;
	height: 601rpx;
	background: #FFFFFF;
	border-radius: 30rpx;

	display: flex;
	flex-direction: column;
	align-items: center;

}
</style>
